<template>
  <div>
    <!-- <el-button type="primary" round @click="showAddNotice">新增</el-button> -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="pageInfo.pageSizes"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.totalPage"
      >
      </el-pagination>
    </div>
    信息标题:
    <el-input
      size="mini"
      v-model="condition.title"
      placeholder="标题模糊查询"
      style="width:120px"
    ></el-input>&nbsp;
    信息分类：
    <el-select
      size="mini"
      v-model="condition.type"
      placeholder="全部"
      style="width:100px"
    >
    <el-option key="0" label="全部" value="0"></el-option>
      <el-option
            v-for="item in noticeTypesOptions"
            :key="item.id"
            :label="item.type"
            :value="item.id">
            </el-option>
    </el-select>&nbsp;
    <el-date-picker
      size="mini"
      value-format="yyyy-MM-dd HH:mm:ss"
      v-model="condition.startTime"
      type="date"
      placeholder="开始日期"
      style="width:150px"
    ></el-date-picker>至
    <el-date-picker
      size="mini"
      value-format="yyyy-MM-dd HH:mm:ss"
      v-model="condition.endTime"
      type="date"
      style="width:150px"
      placeholder="结束日期"></el-date-picker>
    <el-button
      slot="trigger"
      size="mini"
      type="primary"
      @click="getByCondition()">查询
    </el-button>
    <el-button
      icon="el-icon-refresh-right"
      slot="trigger"
      size="mini"
      type="primary"
      @click="reset()">重置
    </el-button>
    <el-button
      icon="el-icon-download"
      slot="trigger"
      size="mini"
      type="primary"
      @click="out()">导出</el-button>
    <el-button
      icon="el-icon-circle-plus"
      slot="trigger"
      size="mini"
      type="primary"
      @click="addNotice()">新建</el-button>
      <el-button
      icon="el-icon-circle-plus"
      slot="trigger"
      size="mini"
      type="primary"
      @click="addType()">新增公告类型</el-button>
    <el-table :data="notices" style="width: 100%">
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column label="信息标题" prop="title" width="100"> </el-table-column>
      <el-table-column label="信息分类" prop="type.type" width="80"></el-table-column>
      <el-table-column label="紧急程度" prop="urgency" width="80"></el-table-column>
      <el-table-column label="内容格式" prop="contentType" width="80"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" :formatter="formatTime" width="180"></el-table-column>
      <!-- <el-table-column label="置顶设置" prop="topSet" width="180"></el-table-column>
      <el-table-column label="显示开关" prop="showSwitch" width="180"></el-table-column> -->
      <el-table-column label="阅读量" prop="readCount" width="80"></el-table-column>
      <el-table-column label="物业" prop="staff.id" width="50"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增类型" :visible.sync="dialogAddTypeFormVisible">
      <el-form>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-input v-model="addTypeVo.type" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddTypeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTypeTest">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改信息" :visible.sync="dialogUpdateFormVisible">
      <el-form>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="notice.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告类型" :label-width="formLabelWidth">
          <el-select v-model="notice.type.id" placeholder="请选择">
            <el-option
            v-for="item in noticeTypesOptions"
            :key="item.id"
            :label="item.type"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="紧急程度" :label-width="formLabelWidth">
          <el-select v-model="notice.urgency" placeholder="请选择">
            <el-option
            v-for="item in urgencyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容格式" :label-width="formLabelWidth">
          <el-select @change="contentChange" v-model="notice.contentType" placeholder="请选择">
            <el-option
            v-for="item in contentTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="['0','1'].includes(notice.contentType)">
          <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="5" v-model="notice.content" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div v-if="notice.contentType=='1'">
          <el-form-item label="图片" :label-width="formLabelWidth">
            <el-input v-model="notice.img" :disabled="true" autocomplete="off"></el-input>
            <el-upload ref="upfile"
                style="display: inline"
                :auto-upload="false"
                :on-change="handleChange"
                :before-remove="beforeRemove"
                :on-remove="onRemove"
                accept="image/jpeg,image/png"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                action="#">
                <el-button  type="success">选择文件</el-button>
            </el-upload>
            <div v-if="notice.img!=''">
                <el-image :src="'http://localhost:8080'+notice.img" lazy></el-image>
            </div>
            <el-form-item>
                <el-button  type="success" @click="updatePhoto">更换图片</el-button>
            </el-form-item>
          </el-form-item>
        </div>
        <div v-if="notice.contentType=='2'">
          <el-form-item label="视频" :label-width="formLabelWidth">
            <el-input v-model="notice.video" :disabled="true" autocomplete="off"></el-input>
            <el-upload
                style="display: inline"
                :auto-upload="false"
                :on-change="videoHandleChange"
                :before-remove="videoBeforeRemove"
                :on-remove="videoOnRemove"
                :before-upload="videoBeforeUpload"
                accept="video/mpeg,video/mp4"
                multiple
                :limit="1"
                :on-exceed="videoHandleExceed"
                :file-list="videoList"
                action="#">
                <el-button  type="success">选择文件</el-button>
            </el-upload>
            <el-form-item>
                <el-button  type="success" @click="videoUpload">更换视频</el-button>
            </el-form-item>
            <el-dialog title="预览" :visible.sync="videoShowVisible">
              <video
                  v-if="notice.video!= '' && !videoFlag"
                  v-bind:src="baseUrl+notice.video"
                  controls="controls"
                  class="avatar video-avatar">
                  您的浏览器不支持视频播放
              </video>
              <i v-else-if="notice.video == '' && videoFlag"
                  class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <el-progress v-if="videoFlag == true" type="circle"
                v-bind:percentage="videoUploadPercent"
                style="margin-top: 7px"></el-progress> -->
            </el-dialog>
          </el-form-item>
        </div>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-date-picker
          v-model="notice.createTime"
          type="date"
          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="阅读量" :label-width="formLabelWidth">
          <el-input v-model="notice.readCount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateNotice">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="新增" :close-on-click-modal="false" @close="addFormClose" :visible.sync="dialogAddFormVisible">
      <el-form>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="noticeAddVo.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告类型" :label-width="formLabelWidth">
          <el-select v-model="noticeAddVo.typeId" placeholder="请选择">
            <el-option
            v-for="item in noticeTypesOptions"
            :key="item.id"
            :label="item.type"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="紧急程度" :label-width="formLabelWidth">
          <el-select v-model="noticeAddVo.urgency" placeholder="请选择">
            <el-option
            v-for="item in urgencyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容格式" :label-width="formLabelWidth">
          <el-select @change="contentChange" v-model="noticeAddVo.contentType" placeholder="请选择">
            <el-option
            v-for="item in contentTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="noticeAddVo.contentType=='1'">
        <el-form-item label="图片" :label-width="formLabelWidth">
            <el-input v-model="noticeAddVo.img" :disabled="true" autocomplete="off"></el-input>
            <el-upload ref="upfile"
                style="display: inline"
                :auto-upload="false"
                :on-change="handleChange"
                :before-remove="beforeRemove"
                :on-remove="onRemove"
                accept="image/jpeg,image/png"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                action="#">
                <el-button  type="success">选择文件</el-button>
            </el-upload>
            <div v-if="dialogImageUrl!=''">
                <el-image :src="dialogImageUrl" lazy></el-image>
            </div>
            <el-form-item>
                <el-button  type="success" @click="upload">点击上传</el-button>
            </el-form-item>
        </el-form-item>
        </div>
        <div v-if="noticeAddVo.contentType=='2'">
        <el-form-item label="视频" :label-width="formLabelWidth">
            <el-input v-model="noticeAddVo.video" :disabled="true" autocomplete="off"></el-input>
            <el-upload
                style="display: inline"
                :auto-upload="false"
                :on-change="videoHandleChange"
                :before-remove="videoBeforeRemove"
                :on-remove="videoOnRemove"
                :before-upload="videoBeforeUpload"
                accept="video/mpeg,video/mp4"
                multiple
                :limit="1"
                :on-exceed="videoHandleExceed"
                :file-list="videoList"
                action="#">
                <el-button  type="success">选择文件</el-button>
            </el-upload>
            <el-form-item>
                <el-button  type="success" @click="videoUpload">上传视频</el-button>
            </el-form-item>
            <el-dialog title="预览" :visible.sync="videoShowVisible">
                <video
                    v-if="noticeAddVo.video!= '' && !videoFlag"
                    v-bind:src="this.videoUrl"
                    controls="controls"
                    class="avatar video-avatar">
                    您的浏览器不支持视频播放
                </video>
                <i v-else-if="noticeAddVo.video == '' && videoFlag"
                    class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <el-progress v-if="videoFlag == true" type="circle"
                v-bind:percentage="videoUploadPercent"
                style="margin-top: 7px"></el-progress> -->
                </el-dialog>
        </el-form-item>
        </div>
        <div v-if="['0','1'].includes(noticeAddVo.contentType)">
        <el-form-item type="textarea" :rows="5" label="内容" :label-width="formLabelWidth">
          <el-input v-model="noticeAddVo.content" autocomplete="off"></el-input>
        </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNoticeTest" :disabled="isUpload">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
        isUpload:true,
        videoShowVisible:false,
        videoMysqlUrl:"",
        videoUrl:"",
        videoList:[],
        noticeAddVo:{
            title:"",
            typeId:"",
            urgency:"",
            contentType:"",
            content:"",
            staffId:"",
            img:"",
            video:"",
            jwt:""
        },
        fileList:[],
        dialogImageUrl:"",
        addTypeVo:{
            id:"",
            type:"",
        },
        baseUrl:"http://localhost:8080",
        imgMysqlUrl:"",
        formLabelWidth: '120px',
        dialogVisible:false,
        dialogFormVisible: false,
        dialogUpdateFormVisible: false,
        dialogAddTypeFormVisible:false,
        dialogAddFormVisible:false,
        noticeTypesOptions:[],
        urgencyOptions:[{
            value:"0",
            label:"日常"
        },{
            value:"1",
            label:"紧急"
        }],
        contentTypeOptions:[{
            value:"0",
            label:"文本"
        },{
            value:"1",
            label:"图文"
        },{
            value:"2",
            label:"短视频"
        }],
        notice: {
            id:0,
            title:"",
            type:{
                id:"",
                type:"",
            },
            urgency:"",
            contentType:"",
            createTime:"",
            readCount:"",
            content:"",
            status:"",
            staffId:"",
            img:"",
            video:""
        },
        condition:{
            title:"",
            type:"",
            startTime:"",
            endTime:"",
        },
        pageInfo:{
            pageNum:1,
            pageSize:5,
            totalPage:0,
            pageSizes:[5,10,15,20]
        },
        notices: [],
        noticeTypes:[],
        videoFlag: false,
      //是否显示进度条
    //   videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
    };
  },
  methods:{
      addFormClose(){
        this.noticeAddVo.title="";
        this.noticeAddVo.typeId="";
        this.noticeAddVo.urgency="";
        this.noticeAddVo.contentType="";
        this.noticeAddVo.content="";
        this.noticeAddVo.img="";
        this.noticeAddVo.video="";
        this.isUpload=false;
      },
      formatTime(row,column){
        let data = row[column.property]
        let dtime = new Date(data)
        const year = dtime.getFullYear()
        let month = dtime.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        let day = dtime.getDate()
        if (day < 10) {
          day = '0' + day
        }
        let hour = dtime.getHours()
        if (hour < 10) {
          hour = '0' + hour
        }let minute = dtime.getMinutes()
        if (minute < 10) {
          minute = '0' + minute
        }
        let second = dtime.getSeconds()
        if (second < 10) {
          second = '0' + second
        }
      return year+ '-' + month+ '-' + day + ' ' + hour + ':' + minute + ':' + second
      },

    videoBeforeUpload(file){
        var fileSize = file.size / 1024 / 1024 < 50;   //控制大小  修改50的值即可
      if (
        [
          "video/mp4",
          "video/mp3",
        ].indexOf(file.type) == -1     //控制格式
      ) {
        this.$message("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        this.$message("视频大小不能超过50MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    contentChange(){
        // alert("内容格式修改")
        this.noticeAddVo.img="";
        this.noticeAddVo.video="";
        if(this.noticeAddVo.contentType!="0"){
            this.isUpload=true;
        }else{
            this.isUpload=false;
        }
    },
    videoUpload(){    
        this.videoShowVisible=true; 
        let fd = new FormData();
        this.videoList.forEach(item=>{
            //文件信息中raw才是真的文件
            fd.append("files",item.raw);
            console.log(item.raw)
        })
        this.isShowUploadVideo=true;
        this.videoFlag=false;
        this.videoUploadPercent=0;
        this.$axios.post('/notice/notice/videoupload',fd).then((r)=>{
            if (r.data.code === 200) {
                //console.log(r);
                this.videoMysqlUrl=r.data.data;
                this.noticeAddVo.video=r.data.data;
                this.videoUrl=this.baseUrl+r.data.data;
                // this.dialogVisible=true;
                this.$message('上传成功')
                console.log(r.data.data);
                this.isUpload=false;
            }else{
                this.$message('失败')
            }
        })
    },  
    videoHandleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    videoOnRemove(file,videoList){
        this.videoUrl="";
        this.noticeAddVo.video="";
        this.isUpload=true;
    },  
    videoBeforeRemove(file,videoList){
        return this.$confirm(`确定移除 ${ file.name }？`);
    },
    videoHandleChange(file,videoList){
        this.videoList = videoList;
        // console.log(videoList)
        this.videoList.forEach(item=>{
            //文件信息中raw才是真的文件
            this.noticeAddVo.video=item.name
            //console.log(item.raw)
        }) 
    },
    upload(){     
        let fd = new FormData();
        this.fileList.forEach(item=>{
                //文件信息中raw才是真的文件
                fd.append("files",item.raw);
                //console.log(item.raw)
            })
        this.$axios.post('/notice/notice/upload',fd).then((r)=>{
            if (r.data.code === 200) {
                //console.log(r);
                this.imgMysqlUrl=r.data.data;
                this.noticeAddVo.img=r.data.data;
                this.dialogImageUrl=this.baseUrl+r.data.data;
                // this.dialogVisible=true;
                this.$message('上传成功')
                console.log(r.data.data);
                this.isUpload=false;
            }else{
                this.$message('失败')
            }
        })
    },
    //通过onchanne触发方法获得文件列表
    handleChange(file, fileList) {
        this.fileList = fileList;
        console.log(fileList)
        this.fileList.forEach(item=>{
                //文件信息中raw才是真的文件
                this.noticeAddVo.img=item.name
                //console.log(item.raw)
        }) 
    },
    beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);

    },
    onRemove(file,fileList){
        this.dialogImageUrl="";
        this.noticeAddVo.img="";
        if(this.noticeAddVo.contentType!="0"){
            this.isUpload=true;
        }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    addNoticeTest(){
        let jwt = localStorage.getItem("jwt");
        this.noticeAddVo.jwt=jwt;
        console.log(this.noticeAddVo);
      let noticeVo={
        title:this.noticeAddVo.title,
        typeId:this.noticeAddVo.typeId,
        urgency:this.noticeAddVo.urgency,
        contentType:this.noticeAddVo.contentType,
        content:this.noticeAddVo.content,
        img:this.noticeAddVo.img,
        video:this.noticeAddVo.video,
        jwt:this.noticeAddVo.jwt,
      }
      console.log(noticeVo);
      this.$axios.post("/notice/notice/add",noticeVo).then((r)=>{
        if(r.data.code==200){
            alert("添加成功")
            this.dialogAddFormVisible=false;
            this.noticeAddVo.title="";
            this.noticeAddVo.typeId="";
            this.noticeAddVo.urgency="";
            this.noticeAddVo.contentType="";
            this.noticeAddVo.content="";
            this.noticeAddVo.img="";
            this.noticeAddVo.video="";
            let noticeVo={
                pageNum:this.pageInfo.pageNum,
                pageSize:this.pageInfo.pageSize
            };
            this.$axios.post("/notice/notice/list",noticeVo).then((rt)=>{
                if(rt.data.code==200){
                    this.pageInfo.totalPage=rt.data.data.totalNum;
                    this.notices=rt.data.data.data; 
              }
          })
        }
      })
    },
    addNotice(){
        this.dialogAddFormVisible=true;
    },
    addType(){
        this.dialogAddTypeFormVisible=true;
    },
    addTypeTest(){
      let noticeTypeVo={
          type:this.addTypeVo.type
      }
      this.$axios.post("/notice/noticeType/add",noticeTypeVo).then((r)=>{
          console.log(r);
        if(r.data.code==200){
          alert("添加成功，类型为："+noticeTypeVo.type);
          this.dialogAddTypeFormVisible=false;
          this.addTypeVo.type="";
        }else{
          alert("添加失败");
        }
      })
    },
    reset(){
      this.$axios.post("/notice/notice/list").then((r)=>{
        if(r.data.code==200){
          this.pageInfo.totalPage=r.data.data.totalNum;
          this.notices=r.data.data.data;
          this.condition.title="";
          this.condition.type="";
          this.condition.startTime="";
          this.condition.endTime="";
        }
      })
    },
    getByCondition(){
      let noticeVo={
        title:this.condition.title,
        typeId:this.condition.type,
        startDate:this.condition.startTime,
        endDate:this.condition.endTime,
        pageNum:this.pageInfo.pageNum,
        pageSize:this.pageInfo.pageSize,
      }
      this.$axios.post("/notice/notice/conditionlist2",noticeVo).then((r)=>{
        //alert("查询title:"+noticeVo.title+"type:"+noticeVo.typeId+"开始时间:"+noticeVo.startDate+"结束时间:"+noticeVo.endDate);
        if(r.data.code==200){
          this.pageInfo.totalPage=r.data.data.totalNum;
          this.notices=r.data.data.data;
        }
      })
    },
    handleDelete(index,row){
      let noticeVo={
        id:row.id
      }
      this.$axios.post("/notice/notice/delete",noticeVo).then((r)=>{
        if(r.data.code==200){
          alert("删除成功");
          console.log("删除第"+index+"行的id为："+row.id+"的记录");
          this.$axios.post("/notice/notice/list").then((r)=>{
            if(r.data.code==200){
              alert("重新查找数据库");
              this.notices=r.data.data.data;
            }
          })
        }
      })
    },
    handleSizeChange(val) {
      let noticeVo={
          pageSize:val,
          pageNum:this.pageInfo.pageNum
      };
      this.$axios.post("/notice/notice/list",noticeVo).then((r)=>{
        if(r.data.code==200){
          console.log("当前页面大小改变：",val)
          this.notices=r.data.data.data
        }
      });
    },
    handleCurrentChange(val) {
      let noticeVo={
        pageSize:this.pageInfo.pageSize,
        pageNum:val
      };
      this.$axios.post("/notice/notice/list",noticeVo).then((r)=>{
        if(r.data.code==200){
          console.log("当前页面数改变：",val)
          this.notices=r.data.data.data
        }
      });
    },
    handleEdit(index,row){
      this.dialogUpdateFormVisible = true;
      let noticeVo={
        id:row.id
      }
      this.$axios.post("/notice/notice/getbyid",noticeVo).then((r)=>{
        if (r.data.code == 200) {
          this.notice = r.data.data;
      }
      })
    },
    updateNotice(){
      let noticeVo={
        id:this.notice.id,
        title:this.notice.title,
        typeId:this.notice.type.id,
        urgency:this.notice.urgency,
        contentType:this.notice.contentType,
        createTime:this.notice.createTime,
        readCount:this.notice.readCount,
        img:this.notice.img,
        video:this.notice.video,
      }
      console.log(this.notice.type.id);
      this.$axios.post("/notice/notice/update",noticeVo).then((r)=>{
        if(r.data.code==200){
          alert("修改成功");
        }
      })
    }
  },
  created() {
      let noticeVo={
          pageNum:this.pageInfo.pageNum,
          pageSize:this.pageInfo.pageSize
      };
    this.$axios.post("/notice/notice/list",noticeVo).then((r) => {
      if (r.data.code == 200) {
        this.notices = r.data.data.data;
        this.pageInfo.totalPage=r.data.data.totalNum;
        this.$axios.post("notice/noticeType/list").then((rt)=>{
          if(rt.data.code==200){
            this.noticeTypesOptions=rt.data.data;
          }
        })
      }
    });
  },
};
</script>
<style>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
  }
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
</style>